<template>
  <div class="m-bottom-bar">
    <slot />
  </div>
</template>

<script lang="ts" setup>
// #region Props
// #endregion
// #region Emits
// #endregion
// #region Hooks
// #endregion
// #region Computed
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.m-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  border-top: 1px solid #eee;
  box-sizing: border-box;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); /* 兼容 Safari */
  background-color: rgba(255, 255, 255, 0.25);
  z-index: 10;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}
</style>
